<template>
  <div class="head-wrap">
    <!-- 头部 -->
    <div class="head">
      <!-- 内容 -->
      <div class="container content">
        <div class="left">
          <!-- logo -->
          <nuxt-link class="logo" to="/">
            <i class="jcicon_fuben jcfont"></i>
          </nuxt-link>
          <!-- 导航栏 -->
          <div class="nav">
            <nuxt-link :to="item.path" class="nav-item" v-for="(item,index) in navLis" :key="index">
              {{item.name}}
            </nuxt-link>
           <!-- <Search/> -->
          </div>
        </div>
        <div class="right">
          <i class="jcfont jcqq right-item"></i>
          <i class="el-icon-s-unfold head-ctrl right-item hidden-md-and-up" @click="change" :class="{'el-icon-s-fold':!show}"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Search from '@/components/Search.vue'
  export default {
    layout: 'head',
    components: {
      Search
    },
    data() {
      return {
        navLis: [{
            name: '首页',
            path: '/'
          },
          {
            name: '分类',
            path: '/classify'
          },
          {
            name: '留言板',
            path: '/msg'
          },
          {
            name: '关于我',
            path: '/about'
          },
          {
            name: '友链',
            path: '/link'
          },
          {
            name: '更新记录',
            path: '/record'
          }
        ],
        show: true
      }
    },
    methods: {
      change(){
        this.$emit('change',this.show=!this.show)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .head-wrap {
    height: 50px;

    .head {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      background-color: #fff;
      box-shadow: $box-shadow-bottom;
      z-index: 999;

      .content {
        height: 50px;
        display: flex;
        @include md(){
          justify-content: space-between;
        }
        overflow-x: scroll;
        padding: 0;
        &::-webkit-scrollbar {
         display: none;
        }


        // 左边
        .left {
          display: flex;

          .logo {
            width: 100px;
            height: 100%;
            @include i-flex;
            i {
              font-size: 40px;
              color: $primary-color;
            }
          }

          .nav {
            height: 100%;
            display: flex;

            .nav-item {
              @include flex;
              height: 100%;
              padding: 0 15px;
              white-space: nowrap;

              &:hover {
                color: $primary-color;
              }

              &.nuxt-link-exact-active {
                color: $primary-color;
              }
            }
          }
        }

        // 右边
        .right {
          padding-right: 50px;
          @include md(){
            padding-right: 15px;
          }
          i {
            font-size: 20px;
            cursor: pointer;
          }
          .right-item{
            padding: 0 15px;
            height: 100%;
            @include flex;
          }
          //控制
          .head-ctrl{
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            background-color: #fff;
            box-shadow: 10px 0 0 0 red;
          }
        }
      }
    }
  }
</style>
